<template>
  <div class="shopping">
    <div class="banner"></div>
    <div class="nav">
        <div class="font">
            <h4>已选商品</h4>
            <van-icon name="delete-o" class="icon"/><span>清空</span>
        </div>
        <ul>
            <li>
                <img src="" alt="">
                <div class="shop">
                    <p class="p1"></p>
                    <div class="computed">
                        <span class="price">￥</span>
                        <span class="sub">-</span>
                        <span class="sum">1</span>
                        <span class="add">+</span>

                    </div>

                </div>
            </li>
        </ul>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>

.shopping{
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 999;
    .banner{
        height: 200px;
        background:rgba($color: #7f7f7f, $alpha: 0.3) ;       
    }
    .nav{
        height: 70%;
        background-color: #fff;
        .font{
            width:100%;
            height: 40px;
            display: flex;
            justify-content: space-between;
            .icon{
                right: -90px;
                top: 25px;
                font-size: 18px;
            }
            span{
                position: relative;
                top: 21px;
                margin-right: 10px;
            }
        }
    }
}

</style>